<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>按钮组</title>
</head>
<body>
    <div class="container">
        <!-- 按钮组内的按钮会自动连在一起 -->
        <div class="btn-group">
            <button type="button" class="btn btn-info">首页</button>
            <button type="button" class="btn btn-info">联系我们</button>
            <button type="button" class="btn btn-info">关于</button>
        </div>
        <hr>
        <!-- 按钮组工具栏 -->
        <div class="btn-toolbar">
            <div class="btn-group">
                <button type="button" class="btn btn-info">文件</button>
                <button type="button" class="btn btn-info">编辑</button>
            </div>
            <div class="btn-group ml-2">
                <button type="button" class="btn btn-info">选择</button>
                <button type="button" class="btn btn-info">查看</button>
            </div>
        </div>
        <hr>
        <!-- 创建大型按钮组 -->
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-info">文件</button>
            <button type="button" class="btn btn-info">编辑</button>
        </div>
        <!-- 默认的按钮组尺寸 -->
        <div class="btn-group">
            <button type="button" class="btn btn-info">文件</button>
            <button type="button" class="btn btn-info">编辑</button>
        </div>
        <!-- 小型按钮组 -->
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-info">文件</button>
            <button type="button" class="btn btn-info">编辑</button>
        </div>
        
    </div>
    
</body>
</html>